<div class="panel-comtv">
  <div
    class="panel-tradingview light"
    [ngStyle]="{ height: 'calc(100% - 50px)' }"
    style="position:relative"
  >
    <div class="panel-header">
      <div class="hd df aic ">
        <div class="lt df">
          <i class="icon iconfont">&#xe609;</i> {{ onSymbol.zi }}/{{
            onSymbol.mu
          }}
        </div>
        <div class="rt df aic jcsb" style="width:100%">
          <div class="i">
            <div class="h">{{ onSymbol.lastPrice }}</div>
            <div class="b">{{ "i18n.tv.lastPrice" | translate: lang }}</div>
          </div>
          <div class="i vol">
            <div class="h">{{ onSymbol.v }}</div>
            <div class="b">24H {{ "i18n.tv.v" | translate: lang }}</div>
          </div>
          <div class="i">
            <div
              class="h"
              appChange
              [hasArrow]="false"
              [val]="onSymbol.change"
              v-change="tv.zi.change"
            >
              {{ onSymbol.change }}
            </div>
            <div class="b">{{ "i18n.tv.c" | translate: lang }}</div>
          </div>
          <div class="i high">
            <div class="h">{{ onSymbol.h }}</div>
            <div class="b">{{ "i18n.tv.h" | translate: lang }}</div>
          </div>
          <div class="i low">
            <div class="h">{{ onSymbol.l }}</div>
            <div class="b">{{ "i18n.tv.l" | translate: lang }}</div>
          </div>
        </div>
      </div>
    </div>

    <div
      id="tv_chart_container"
      class="TVChartContainer"
      style="margin-top:58px;"
      [ngStyle]="{ height: '384px' }"
    ></div>
  </div>
</div>
